---
layout: fomantic
title: Next Playground
---

<h2 class="ui massive header">JSON-LD Playground</h2>
<div class="ui info message">
  <strong>NOTES</strong>:
  <ul>
    <li>
      The playground uses <a href="https://github.com/digitalbazaar/jsonld.js">jsonld.js</a>
      which <a href="https://github.com/digitalbazaar/jsonld.js#conformance">conforms</a>
      to JSON-LD 1.1
      <a href="https://www.w3.org/TR/json-ld11/">syntax</a>
      (<a href="https://w3c.github.io/json-ld-syntax/errata/">errata</a>),
      <a href="https://www.w3.org/TR/json-ld11-api/">API</a>
      (<a href="https://w3c.github.io/json-ld-api/errata/">errata</a>), and
      <a href="https://www.w3.org/TR/json-ld11-framing/">framing</a>
      (<a href="https://w3c.github.io/json-ld-framing/errata/">errata</a>).
    </li>
    <li>
      Other related playgrounds:
      <a href="./1.0/">Classic JSON-LD 1.0 Playground</a> |
      <a href="http://rdf.greggkellogg.net/distiller">RDF Distiller</a> |
      <a href="https://vcplayground.org/">Verifiable Credentials Playground</a>
    </li>
  </ul>
  <p>Accesibility note: use <code>Esc</code> and then <code>Tab</code> (or
  <code>Shift+Tab</code>) to navigate out of the editor.</p>
</div>

<div class="ui wide container" v-scope v-effect="setOutputTab()">
  <div class="ui buttons">
    <button class="ui large basic right pointing label">Examples</button>
    <button id="btn-person" class="ui button"
      @click="loadExample('person.jsonld')">
      <i class="icon user"></i>
      <span>Person</span>
    </button>
    <button id="btn-event" class="ui button"
      @click="loadExample('event.jsonld')">
      <i class="icon calendar"></i>
      <span>Event</span>
    </button>
    <button id="btn-place" class="ui button"
      @click="loadExample('place.jsonld')">
      <i class="icon map marker"></i>
      <span>Place</span>
    </button>
    <button id="btn-product" class="ui button"
      @click="loadExample('product.jsonld')">
      <i class="icon barcode"></i>
      <span>Product</span>
    </button>
    <button id="btn-recipe" class="ui button"
      @click="loadExample('recipe.jsonld')">
      <i class="icon food"></i>
      <span>Recipe</span>
    </button>
    <button id="btn-library" class="ui button"
      @click="loadExample('library.jsonld')">
      <i class="icon book"></i>
      <span>Library</span>
    </button>
    <button id="btn-activity" class="ui button"
      @click="loadExample('activity.jsonld')">
      <i class="icon comment"></i>
      <span>Activity</span>
    </button>
  </div>

  <button id="keyboard-shortcuts" class="ui right floated button" data-position="left center">
    <i class="icon keyboard"></i> Shortcuts
  </button>
  <div class="ui popup">
    <div class="ui top attached label">Keyboard Shortcuts</div>
    <table class="ui very basic single line celled table">
      <thead>
        <tr>
          <th>Key</th>
          <th>Autocomplete</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><label class="ui label">@</label></td>
          <td>all of the <b>@</b> keywords</td>
        </tr>
        <tr>
          <td><label class="ui label">Ctrl+Space</label></td>
          <td>available keys in <b>@context</b></td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- main editor area -->
  <div class="ui one column wide compact grid container" :class="[editorColumns]">
    <div class="column" :class="{ 'sixteen wide':  editorColumns == '' }">
      <div class="ui top attached tabular menu">
        <div :class="{ active: inputTab == 'json-ld' }" class="item" @click="inputTab = 'json-ld'"><i class="pencil alternate icon"></i> JSON-LD Input</div>
        <div :class="{ active: inputTab == 'options' }" class="item" @click="inputTab = 'options'"><i class="wrench icon"></i> Options</div>
        <div class="right menu">
          <div class="item">
            <div class="ui icon input">
              <input type="text" placeholder="Document URL"
                v-model="remoteDocURL" @keyup.enter="retrieveDoc(mainEditor, 'doc', remoteDocURL)">
              <i class="file link icon" @click="retrieveDoc(mainEditor, 'doc', remoteDocURL)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="ui bottom attached fitted resizable scrolling segment" v-show="inputTab == 'json-ld'">
        <div id="editor" @vue:mounted="initMainEditor()"><!-- replaced by CodeMirror --></div>
      </div>
      <div class="ui bottom attached segment" v-show="inputTab == 'options'">
        <form class="ui form">
          <div class="inline fields" id="options-api-processingMode">
            <label for="options-api-processingMode" class="two wide field">Processing Mode</label>
            <div class="field">
              <div class="ui radio checkbox">
                <input type="radio" id="options-api-processingMode-default" name="processingMode" value="" checked
                  v-model="options.processingMode">
                <label for="options-api-processingMode-default">Default</label>
              </div>
            </div>
            <div class="field">
              <div class="ui radio checkbox">
                <input type="radio" id="options-api-processingMode-1-0" name="processingMode" value="json-ld-1.0"
                  v-model="options.processingMode">
                <label for="options-api-processingMode-1-0">JSON-LD 1.0</label>
              </div>
            </div>
            <div class="field">
              <div class="ui radio checkbox">
                <input type="radio" id="options-api-processingMode-1-1" name="processingMode" value="json-ld-1.1"
                  v-model="options.processingMode">
                <label for="options-api-processingMode-1-1">JSON-LD 1.1</label>
              </div>
            </div>
          </div>

          <div class="inline fields" id="options-api-base">
            <label for="options-api-base" class="two wide field">Base</label>
            <div class="field">
              <div class="ui radio checkbox">
                <input type="radio" id="options-api-base-default" name="base" value="" checked
                  v-model="options.base">
                <label for="options-api-base-default">Default</label>
              </div>
            </div>
            <div class="field">
              <div class="ui radio checkbox">
                <input type="radio" id="options-api-base-custom" name="base" value="custom"
                  v-model="options.base">
                <label for="options-api-base-custom">Custom URL</label>
              </div>
            </div>
            <div class="eleven wide field">
              <input type="text" id="options-api-base-url" placeholder="URL"
                v-model="options.baseUrl">
            </div>
          </div>

          <div class="inline fields">
            <label class="two wide field"></label>
            <div class="field">
              <div class="ui checkbox">
                <input type="checkbox" id="options-api-compactArrays"
                  v-model="options.compactArrays">
                <label for="options-api-compactArrays">Compact Arrays</label>
              </div>
            </div>
          </div>

          <div class="inline fields">
            <label class="two wide field"></label>
            <div class="field">
              <div class="ui checkbox">
                <input type="checkbox" id="options-api-compactToRelative"
                  v-model="options.compactToRelative">
                <label for="options-api-compactToRelative">Compact To Relative</label>
              </div>
            </div>
          </div>

          <div class="field">
            <div class="inline fields" id="options-api-rdfDirection">
              <label for="options-api-rdfDirection" class="two wide field">RDF Direction Mode</label>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" id="options-api-rdfDirection-default" name="rdfDirection" value="" checked
                    v-model="options.rdfDirection">
                  <label for="options-api-rdfDirection-default">Default (null)</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" id="options-api-rdfDirection-i18n-datatype" name="rdfDirection" value="i18n-datatype"
                    v-model="options.rdfDirection">
                  <label for="options-api-rdfDirection-i18n-datatype">"i18n-datatype"</label>
                </div>
              </div>
            </div>
          </div>

          <div class="field">
            <div class="inline fields" id="options-api-safe">
              <label for="options-api-safe" class="two wide field">Safe</label>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" id="options-api-safe-default" name="safe" value="" checked
                    v-model="options.safe">
                  <label for="options-api-safe-default">Default</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" id="options-api-safe-false" name="safe" value="false"
                    v-model="options.safe">
                  <label for="options-api-safe-false">False</label>
                </div>
              </div>
              <div class="field">
                <div class="ui radio checkbox">
                  <input type="radio" id="options-api-safe-true" name="safe" value="true"
                    v-model="options.safe">
                  <label for="options-api-safe-true">True</label>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="column" v-show="editorColumns != ''">
      <div class="ui top attached tabular menu">
        <div class="icon item" v-show="outputTab == 'compacted' || outputTab == 'flattened'">
          <i class="arrow alternate circle down outline icon" style="cursor: pointer;"
            title="Copy `@context` from &quot;JSON-LD Input&quot;"
            @click="copyContext()"></i>
        </div>
        <div class="active item"><i class="pencil alternate icon"></i>
          <span v-show="outputTab == 'compacted' || outputTab == 'flattened'">New JSON-LD Context</span>
          <span v-show="outputTab == 'framed'">JSON-LD Frame</span>
        </div>
        <div class="right menu">
          <div class="item">
            <div class="ui icon input">
              <input type="text" :placeholder="sideEditorURLFieldPlaceholderText"
                v-model="remoteSideDocURL" @keyup.enter="retrieveDoc(sideEditor, sideDoc, remoteSideDocURL)">
              <i class="file link icon" @click="retrieveDoc(sideEditor, sideDoc, remoteSideDocURL)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="ui bottom attached fitted resizable scrolling segment">
        <div id="context-editor"
          v-show="outputTab == 'compacted' || outputTab == 'flattened'"
          @vue:mounted="initContextEditor()"><!-- replaced by CodeMirror --></div>
        <div id="frame-editor"
          v-show="outputTab == 'framed'"
          @vue:mounted="initFrameEditor()"><!-- replaced by CodeMirror --></div>
      </div>
    </div>
  </div>
  <!-- errors -->
  <div class="ui error message" v-show="parseError" v-text="parseError"></div>
  <!-- outputs and renderings -->
  <div class="ui top attached tabular menu">
    <div v-for="(tab, key) in tabs" :class="{ active: outputTab == key }" class="item" @click="setOutputTab(key)"><i class="icon" :class="tab.icon"></i> <span v-text="tab.label"></span></div>
  </div>
  <div class="ui fitted resizable scrolling active bottom attached tab segment">
    <div class="ui grid">
      <div class="column" :class="{'nine wide': outputTab == 'cborld'}">
        <div v-show="outputTab != 'table'" id="read-only-editor"><!-- replaced by CodeMirror --></div>
        <table class="ui very padded table" v-show="outputTab == 'table'">
          <thead>
            <tr>
              <th>Subject</th>
              <th>Predicate</th>
              <th>Object</th>
              <th>Language</th>
              <th>Datatype</th>
              <th>Graph</th>
            </tr>
          </thead>
          <tr v-for="quad in tableQuads">
            <td>
              <a v-if="quad.subject.termType == 'NamedNode'"
                :href="quad.subject.value"
                v-text="quad.subject.value"></a>
              <span v-else v-text="quad.subject.value"></span>
            </td>
            <td>
              <a v-if="quad.predicate.termType == 'NamedNode'"
                :href="quad.predicate.value"
                v-text="quad.predicate.value"></a>
              <span v-else v-text="quad.predicate.value"></span>
            </td>
            <td>
              <a v-if="quad.object.termType == 'NamedNode'"
                :href="quad.object.value"
                v-text="quad.object.value"></a>
              <span v-else v-text="quad.object.value"></span>
            </td>
            <td v-text="quad.object.language"></td>
            <td>
              <a v-if="quad.object.datatype"
              :href="quad.object.datatype.value"
                v-text="quad.object.datatype.value"></a>
            </td>
            <td v-text="quad.graph.value"></td>
          </tr>
        </table>
      </div>
      <div class="seven wide column" v-if="outputTab == 'cborld'">
        <table class="ui fixed definition table">
          <tr>
            <td class="three wide">JSON-LD Size</td><td><span v-text="cborLD.jsonldSize"></span> bytes</td>
          </tr>
          <tr>
            <td>CBOR-LD Size</td><td><span v-text="cborLD.size"></span> bytes</td>
          </tr>
          <tr>
            <td>Compression</td><td><span v-text="cborLD.percentage"></span>%</td>
          </tr>
          <tr class="top aligned">
            <td>Hex</td><td v-text="cborLD.hex" style="word-wrap: break-word;"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

<script src="./editor.bundle.js"></script>
